<template>
      <v-app-bar
          class="myNav"
          fixed
          dark
          shrink-on-scroll
          :src="navUrl"
      >
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-app-bar-title style="color: #fff;font-size: 6vw">2021成都车展</v-app-bar-title>
        <v-spacer></v-spacer>

        <v-btn icon @click="goAccount">
          <v-icon v-if="!this.$store.state.user.userName">mdi-account</v-icon>
          <v-avatar
          v-else
          class="avatar"
          size="40">
          <img :src="this.$store.state.user.userAvatar" alt="John" />
        </v-avatar>
        </v-btn>

        <v-navigation-drawer
            :hide-overlay="true"
            height="100vh"
            v-model="drawer"
            fixed
            dark
            :src="drawUrl"
            temporary
            width="45vw"
        >
          <v-list
              nav
              dense
          >
            <v-list-item-group
                v-model="group"
            >
              <v-list-item v-for="(item,index) of navList" :key=index :to="item.path" @click.stop="drawer = false">
                <v-list-item-title>{{item.page}}</v-list-item-title>
              </v-list-item>

            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
      </v-app-bar>
</template>

<script>
import Vue from 'vue';
import {getNav} from '@/api/pic'
export default Vue.extend({
  name: "MyNav",
  data: () => ({
    drawer: false,
    group: null,
    navList: [
      {
        page: '首页',
        path: '/home'
      },
      {
        page: '展会地图',
        path: '/map'
      },
      {
        page: '抢先看',
        path: '/car'
      },
      {
        page: '票务',
        path: '/tic'
      },
      {
        page: '车友圈',
        path: '/comment'
      }
    ],
    navUrl: '',
    drawUrl: ''
  }),
  methods: {
    goAccount(){
      this.$router.push('/account')
    }
  },
  watch: {
    group () {
      this.drawer = false
    },
  },
  mounted(){
    getNav()
        .then(res => {
          const {code,url,url2} = res
          if(code === 200){
            this.navUrl = url
            this.drawUrl = url2
          }
          console.log(res);
        })
  }
})
</script>

<style lang="scss">
.myNav {
  .v-app-bar-title__placeholder, .v-app-bar-title__content{
    text-overflow: unset;
  }
  .avatar {
    border: 2px solid #fff;
  }
}
</style>